<script src="../../../build/webpack.prod.conf.js"></script>
<template>
  <div class="material-list" style="text-align: center">
    <van-form style="text-align: center;background-color: #dcdee0;padding:0.5rem">

<!--<div style="height: 3.3rem;background-color: white;padding: 0.5rem 0rem 0.5rem 0rem">-->
      <van-cell is-link class="aaa" :value="areaTest" @click="showArea = true"/>
      <van-action-sheet v-model="showArea" title="地址">
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          @cancel="cancelArea"
          @confirm = "confirmArea"
        />
      </van-action-sheet>
<!--</div>-->
    </van-form>


    <van-icon :class="this.van" class="anniu" name="bars" size="25" @click="toCategory"/>
    <van-tabs @click="onClick" style="text-align: left;margin: -40px 0px 0px 0px">
      <van-tab title="推荐">
        <div class="material-list-grid"  style="width: 45.5%;" v-for="(product,index) in productCategory" @click="toDetails(product.productId)">
          <van-image width="10rem" height="10rem" fit="cover" :src="product.picUrlAl"/>
          <div class="material-list-grid-content">
            <div align="left" style="background-color: gainsboro;border-radius: 1rem">
              <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" :src="product.supplierPic"/>
              <p style="padding: 0;height: 1.5rem;line-height: 1.55rem;overflow: hidden;margin: 0px;">{{product.categoryName}}直营</p>
            </div>
            <div align="left">
              <p>{{product.productName}}</p>
              <p>{{product.shopsName}}</p>
            </div>
            <div align="left">
              <div>
                <span style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</span>
                <span style="font-weight: bolder;font-size: 1rem">￥{{product.price}}</span>
              </div>
              <!--              <div><span>市场价:</span><span>￥{{c.price}}</span></div>-->
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab v-for="(category,index) in categorys" :name="category.categoryId" :title="category.categoryName" :key="index">
        <div class="material-list-grid" v-for="(pro,index) in proCategory" @click="toDetails(pro.productId)">
          <van-image width="10rem" height="10rem" fit="cover" :src="pro.picUrlAl"/>
          <div class="material-list-grid-content">
            <div align="left" style="background-color: gainsboro;border-radius: 1rem">
              <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" :src="pro.supplierPic"/>
              <p style="padding: 0;height: 1.5rem;line-height: 1.55rem">专业{{pro.categoryName}}直营</p>
            </div>
            <div align="left">
              <p>{{pro.productName}}</p>
              <p>{{pro.shopsName}}</p>
            </div>
            <div align="left">
              <div>
                <span style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</span>
                <span style="font-weight: bolder;font-size: 1rem">￥{{pro.price}}</span>
              </div>
<!--              <div><span>市场价:</span><span>￥{{c.price}}</span></div>-->
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import { Toast } from 'vant';
  import { selectProductByCateGoryType,getProductByCateGory,selectProductByCateGoryOne,selectProductByCateGoryTypeOne,selectProductByCateGoryTypeTwo } from '@/api/commodity/shop_product.js'
  import areaList from '@/utils/area';
  export default {
    name: "material_list",
    props:{
      categorys: Array,
      categoryType: Number,
    },
    data() {
      return{
        // 选择地区展示
        showArea:false,
        areaTest:"",
        areaList,
        proCategory: [],
        productCategory: [],
        van: 'van-icon'
      }
    },
    created() {
      this.getList(this.categoryType);
      this.huigui();
    },
    methods: {

      huigui(){
        console.log("***** this.$route.query.areaTest***"+ this.$route.query.areaTest)
        if (this.areaTest == '' && this.$route.query.areaTest == undefined){
          this.areaTest ='请选择省市区'
        }else if(this.$route.query.areaTest =='请选择省市区'){

        }else{
          this.areaTest = this.$route.query.areaTest
          if (this.categoryType == 0){
            selectProductByCateGoryTypeOne(this.areaTest).then(res=>{
              this.productCategory = res.data.data;
            })
          }else{
            selectProductByCateGoryTypeTwo(this.areaTest).then(res=>{
              this.productCategory = res.data.data;
            })
          }
        }




      },

      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },

      // 地址确定事件
      confirmArea(res){
        this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest = res[1].name;
        }
        if (this.categoryType == 0){
          selectProductByCateGoryTypeOne(this.areaTest).then(res=>{
            this.productCategory = res.data.data;
          })
        }else{
          selectProductByCateGoryTypeTwo(this.areaTest).then(res=>{
            this.productCategory = res.data.data;
          })
        }

        this.showArea = false;
      },


      toCategory(){
        this.$router.push({path:"/material_category",
          query:{
            materialId:this.categoryType,
            areaTest:this.areaTest
          }
        });
      },
      toDetails(productId){
        this.$router.push({path:"/commodity_details",query:{commodityId:productId}});
      },
      onClick(name, title) {
        if (this.areaTest == "请选择省市区"){
          getProductByCateGory(name).then((res) => {
            this.proCategory = res.data.data;
          });
        }else{
          var cateGoryId =name;
          var address =this.areaTest;
          var data = {address:address,a:cateGoryId}
          selectProductByCateGoryOne(data).then((res) => {
            this.proCategory = res.data.data;
          });
        }
      },
      getList(id){
        selectProductByCateGoryType(id).then((res) => {
          this.productCategory = res.data.data;
        });
        if(this.categoryType == 2){
          this.van = 'van-none'
        }
      },
    }
  }
</script>

<style scoped>
  .anniu{
    /*height: 0rem;*/
    left: 10rem;
    top: 0rem;
    position: relative;
    z-index: 999999;
    background-color: whitesmoke;
  }
  .material-list{
    position: relative;
    text-align: left;
  }
  .material-list-grid{
    display: inline-block;
    padding: 0.5rem;
  }

  .material-list-grid P{
    font-size: 0.5rem;
    padding: 0.1rem 0;
  }
</style>
